<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var o = {}
      o.a = 200
      o.a = true

      console.log(o.a)
      //像上列代码就会出现代码覆盖的现象，原因就在于属性名是一样的
      function f1(gender) {
        if (gender == 'male') {
        } else if (gender == 'female') {
        }
      }
      f1('male')
      //可以将代码改成下列这样，直接点出来，不会出错，即使错了也会在开发阶段发现
      //f1(p.male)

      //推出一个Symbol，是唯一的
      var s1 = Symbol('描述')
      var s2 = Symbol('描述')

      console.log(s1)
      console.log(s1 === s2)

      //假设我们不能或不知道s1这个变量，我们如何获取对象o的s1属性的值呢？
      //如果我们丢失了变量s1，s2的访问，那么o对象的这2个属性就永远访问不到了。
      var s3 = Symbol.for('全局注册的一个变量')
      o[s3] = 500
      console.log(o[s3])

      //假定s3变量我们无法访问，可以使用以下方法
      var s4 = Symbol.for('全局注册的一个变量')
      console.log(o[s4])
      //Symbol.for的原理：第一次依据描述是全局注册一个
      //第二次以及后来的调用，依据描述在全局注册表里面查找，直到找到为止

      //keyFor方法返回的是符号的描述
      var result = Symbol.keyFor(s3)
      console.log(result)

      var gender = {
        male: Symbol.for('male'),
        female: Symbol.for('female'),
      }

      function f2(g) {
        if (g == gender.male) {
          console.log('这是男生')
        } else if (g == gender.female) {
          console.log('这是女生')
        }
      }

      f2(gender.male)
    </script>
  </body>
</html>
